<template>
  <div>
    <div v-if="count == 0">你还没有创建过帖子</div>
    <Modal
      style="position: absolute"
      v-model="ModalSwitch"
      title="选择模块"
      @on-ok="changeBoard"
    >
      <Select v-model="boardId" style="width: 200px" placeholder="请选择版块">
        <Option
          v-for="item in boardList"
          :value="item.boardId"
          :key="item.boardId"
          >{{ item.boardName }}</Option
        >
      </Select>
    </Modal>
    <div v-for="item in ajaxResult" :key="item.postingId" class="posting-row">
      <Card
        style="width: 80%; height: 90%; margin-left: 10%; float: left"
        :to="'/Posting/' + item.postingId"
      >
        <div>
          <div class="posting-name">[ {{ item.postingName }}]</div>
          <Divider />
          <div class="firstContent">
            {{ item.firstContent }}
          </div>
          <div class="author-box">
            <div style="height: 40px">
              <span style="line-height: 60px">{{ item.nickName }}</span>
              <Avatar :src="item.headImage" size="large" style="float: right" />
            </div>
            <div>创建日期:{{ item.createDate }}</div>
          </div>
          <!-- <div></div> -->
          <!-- <img src="../../images/logo.png"> -->
          <!-- <h3>{{ item }}</h3> -->
        </div>
      </Card>
      <Button
        style="float: right; width: 6em; margin-top: 2em"
        type="info"
        @click="changeBoardButton(item.postingId, item.boardId)"
        >移动板块</Button
      >
      <Button
        style="float: right; width: 6em"
        @click="deletePosting(item.postingId)"
        type="error"
        >删除</Button
      >
    </div>
    <div style="position: fixed; bottom: 3em; width: 20%; margin-left: 40%">
      <Page :total="count" @on-change="change_page" :page-size="5" show-total />
    </div>
  </div>
</template>

<script>

export default {

  name: 'PostingManage',
  data () {
    return {
      ajaxResult: '',
      count: 0,
      ModalSwitch: false,
      boardId: '',
      boardList: '',
      postingId: ''

    }
  },
  methods: {
    changeBoardButton (postingId, boardId) {
      console.log(postingId + '' + boardId)
      this.boardId = boardId
      this.ModalSwitch = true
      this.postingId = postingId
    },
    changeBoard () {
      var _this = this
      this.$axios({
        method: 'post',
        url: '/movePosting',
        data: {
          boardId: this.boardId,
          postingId: this.postingId
        }
      }).then(function (response) {
        console.log(response.data)
        _this.$Message.info('移动成功!')
        _this.selectPosting()
        _this.selectBoard()
      })
    },
    selectPosting: function () {
      var _this = this
      this.$axios({
        method: 'get',
        url: '/selectPosting',
        params: {
          userId: this.$CommonVar.UserInformation.userId,
          page: 1
        }
      }).then(function (response) {
        console.log(response.data.count)
        console.log(response.data)
        _this.ajaxResult = response.data.result
        _this.count = response.data.count
      })
    },
    deletePosting: function (postingId) {
      console.log(postingId)
      var _this = this // 临时变量
      this.$axios({
        method: 'post',
        url: '/deletePosting',
        data: {
          postingId: postingId
        }
      }).then(function (response) {
        console.log(response.data)
        if (response.data.code === 1) { _this.$Message.info('删除成功') }
        // location.reload()
        _this.selectPosting()
      })
    },
    change_page (page) {
      // console.log(page)
      var _this = this // 临时变量
      this.$axios({
        method: 'get',
        url: '/selectPosting',
        params: {
          userId: this.$CommonVar.UserInformation.userId,
          page: page
        }
      }).then(function (response) {
        console.log(response.data)
        if (response.data.result.length > 0) {
          _this.ajaxResult = response.data.result
        }
        _this.count = response.data.count
      })
    },
    selectBoard () {
      var that = this
      this.$axios({
        method: 'get',
        url: '/selectBoard'
      }).then(function (response) {
        console.log(response)
        that.boardList = response.data.result
      })
    }
  },
  mounted () {
    console.log(this.$CommonVar.UserInformation.userId)
    // if (typeof (CommonVar.UserInformation.userId) === 'undefined') {
    //   this.$router.push('/loginAuth')
    // }
    console.log(this.$CommonVar.UserInformation.userId)
    console.log('尝试加载用户信息')
    var _this = this
    this.$axios({
      method: 'post',
      url: '/login/success'
    }).then(function (response) {
      console.log(response.data.result)
      if (response.data.code === 1) {
        _this.$CommonVar.UserInformation = response.data.result
        _this.selectPosting()
        _this.selectBoard()
      } else {
        console.log('登录信息过期了')
        // _this.$cookies.delete('JSESSIONID')
      }
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.posting-row {
  margin-left: 20%;
  margin-top: 1%;
  width: 50%;
  height: 10em;
  /* border: 0.1em solid red; */
}

.posting-name {
  float: left;
}
.firstContent {
  float: left;
}
.author-box {
  float: right;
}
</style>
